<!DOCTYPE HTML>
<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>在此处插入标题</title>
<script type="text/javascript" src="js/jquery_3.2.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#roleName").blur(function(){
		if(this.value==""){
			alert("角色名称不能为空！");
	  		return false;
		}
		$.post("checkRoleName",{rolename:$(this).val()},function(rtn){
			if(rtn=="true"){
  				alert("角色名重复了");
  			}else{
  				alert("角色名可以使用！");
  			}
		},"text");
	});
});
/* function createAjax(){
	return new XMLHttpRequest();
}
  function checkRoleName(p){
  	if(p.value=="")
  	{
  		alert("角色名称不能为空！");
  		return false;
  	}
  	var xhr=createAjax();
  	xhr.onreadystatechange=function(){
  		if(xhr.readyState==4&&xhr.status==200){
  			var rtn=xhr.responseText;//getWriter().print
  			alert(rtn);
  			if(rtn=="true"){
  				alert("角色名重复了");
  			}else{
  				alert("角色名可以使用！");
  			}
  		}
  	}
  	xhr.open("get", "checkRoleName?rolename="+p.value, true);
  	xhr.send(null);
  } */
</script>
</head>
<body>
  <form action="addRoleServlet" method="post">
  <h1>增加新角色</h1>
  <!-- 是否有重复的名字 -->
  <input type="text" name="role" id="roleName" placeholder="角色名称" onblur="checkRoleName(this)"/>
  <input type="text" name="rolemark" placeholder="角色说明"/>
  <input type="submit"/>
  </form>
</body>
</html>